<template>
  <div>
    <!-- 数量统计 -->
    <el-row :gutter="20" class="num-box mb-2">
      <el-col :span="6">
        <div class="num-item">
          <p class="num-title">流程定义数</p>
          <div class="num-cont d-flex j-sb">
            <div class="num-num">23</div>
            <div class="num-txt">今日新增3</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="num-item">
          <p class="num-title">流程实例数</p>
          <div class="num-cont d-flex j-sb">
            <div class="num-num">45</div>
            <div class="num-txt">今日新增2</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="num-item">
          <p class="num-title">任务数</p>
          <div class="num-cont d-flex j-sb">
            <div class="num-num">54</div>
            <div class="num-txt">今日新增5</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="num-item">
          <p class="num-title">用户数</p>
          <div class="num-cont d-flex j-sb">
            <div class="num-num">6</div>
            <div class="num-txt">今日新增1</div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 排名前五流程部署产生实例数 -->
    <el-row :gutter="20" class="mb-2">
      <el-col :span="18">
        <div class="chart-box">
          <p class="chart-title">排名前五流程部署产生实例数</p>
          <div ref="lineChart" class="chart-cont"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="chart-box">
          <p class="chart-title">排名前五流程部署产生实例数</p>
          <div ref="pieChart" class="chart-cont"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 过去7天任务创建数和完成数统计 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-box">
          <p class="chart-title"></p>
          <div ref="barChart" class="chart-cont"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-box">
          <p class="chart-title">过去7天任务创建数和完成数统计</p>
          <div ref="lineChart1" class="chart-cont"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { lineChart, pieChart, barChart } from '@/utils/chart'
export default {
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      this.initLineChart()
      this.initPieChart()
      this.initBarChart()
      this.initLineChart1()
    })
  },
  methods: {
    initLineChart() {
      const param = {
        isSymbol: true,
        isSmooth: true,
        isArea: true,
        isShowLegend: true,
        xAxisData: ['06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02'],
        seriesData: [
          { name: '请假流程', data: [2, 4, 6, 7, 9, 4, 2] },
          { name: '报销流程', data: [3, 1, 5, 3, 4, 8, 3] },
          { name: '出差申请流程', data: [3, 2, 1, 4, 2, 1, 1] },
          { name: '采购申请流程', data: [3, 2, 6, 8, 4, 2, 3] },
          { name: '业务审批流程', data: [6, 5, 8, 7, 9, 10, 8] }
        ]
      }
      const chart = this.$refs.lineChart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(lineChart(param))
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    },
    initPieChart() {
      const param = {
        isShowLegend: true,
        legendOrient: 'horizontal',
        legendY: 'bottom',
        legendType: 'plain',
        radius: ['0%', '60%'],
        center: ['55%', '50%'],
        roseType: 'area',
        showLabel: true,
        showLabelLine: true,
        data: [
          { name: '请假流程', value: 2 },
          { name: '报销流程', value: 3 },
          { name: '出差申请流程', value: 4 },
          { name: '采购申请流程', value: 6 },
          { name: '业务审批流程', value: 6 }
        ]
      }
      const chart = this.$refs.pieChart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(pieChart(param))
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    },
    initBarChart() {
      const param = {
        isShowLegend: true,
        yAxisLineShow: true,
        xAxisData: ['06-30', '07-01', '07-02'],
        seriesData: [
          { name: '任务创建数', data: [4, 8, 9], barWidth: 50 },
          { name: '任务完成数', data: [8, 7, 5], barWidth: 50 }
        ]
      }
      const chart = this.$refs.barChart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(barChart(param))
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    },
    initLineChart1() {
      const param = {
        isSymbol: true,
        isSmooth: true,
        isShowLegend: true,
        xAxisData: ['06-26', '06-27', '06-28', '06-29', '06-30', '07-01', '07-02'],
        seriesData: [
          { name: '任务创建数', data: [12, 13, 10, 13, 9, 23, 21] },
          { name: '任务完成数', data: [22, 18, 19, 23, 29, 33, 31] }
        ]
      }
      const chart = this.$refs.lineChart1
      if (chart) {
        const myChart = this.$echarts.init(chart)
        myChart.setOption(lineChart(param))
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.num-box {
  .num-item {
    border: 1px solid #eceff9;
    border-radius: 5px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    .num-title {
      position: relative;
      height: 42px;
      line-height: 42px;
      padding: 0 15px;
      border-bottom: 1px solid #f6f6f6;
      color: #333;
      border-radius: 2px 2px 0 0;
      font-size: 16px;
      font-weight: bold;
    }
    .num-cont {
      color: #000;
      height: 80px;
      position: relative;
      padding: 10px 15px;
      line-height: 24px;
      .num-num {
        width: 66.66%;
        line-height: 60px;
        font-size: 30px;
        border-right: 1px solid #eceff9;
        padding: 2.5px;
      }
      .num-txt {
        line-height: 60px;
        font-size: 12px;
        color: #1aa094;
        padding: 2.5px;
      }
    }
  }
}
.chart-box {
  background-color: rgb(255, 255, 255);
  min-height: 400px;
  padding: 10px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
  .chart-title {
    height: 20px;
    line-height: 20px;
    font-size: 18px;
    font-weight: bold;
    color: #666666;
  }
  .chart-cont {
    height: 360px;
  }
}
</style>